/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/services/page.tsx
 * Description: Services page — the eight practice areas as anchored sections, plus engagement model
 */

import type { Metadata } from "next";
import Link from "next/link";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.services.title }, description: meta.services.description };
}

export default async function ServicesPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const typedLocale = locale as Locale;
  const { services, nav } = getMessages(typedLocale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={services.title} lead={services.lead} />
          <nav aria-label="Services index" className="mt-10 flex flex-wrap gap-2">
            {services.items.map((service) => (
              <a
                key={service.id}
                href={`#${service.id}`}
                className="rounded-full border border-line-strong bg-card px-4 py-1.5 text-sm text-ink-soft transition-colors hover:border-accent hover:text-accent"
              >
                {service.title}
              </a>
            ))}
          </nav>
        </Container>
      </section>

      <section className="py-16 sm:py-20">
        <Container>
          <div className="grid gap-6 lg:grid-cols-2">
            {services.items.map((service, index) => (
              <article
                key={service.id}
                id={service.id}
                className="scroll-mt-24 rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10"
              >
                <p className="font-mono text-sm text-accent">
                  {String(index + 1).padStart(2, "0")}
                </p>
                <h2 className="mt-3 font-display text-2xl font-semibold tracking-tight text-ink">
                  {service.title}
                </h2>
                <p className="mt-4 leading-relaxed text-ink-soft">{service.description}</p>
                <ul className="mt-6 grid gap-2.5">
                  {service.points.map((point) => (
                    <li key={point} className="flex items-start gap-2.5 text-sm text-ink">
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        fill="none"
                        aria-hidden="true"
                        className="mt-0.5 shrink-0"
                      >
                        <path
                          d="M3 8.5l3.2 3L13 4.5"
                          stroke="#0b6b4a"
                          strokeWidth="1.8"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                      {point}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* Engagement model */}
      <section className="border-t border-line bg-ink py-16 sm:py-20">
        <Container className="text-center">
          <h2 className="font-display text-2xl font-semibold tracking-tight text-paper sm:text-3xl">
            {services.engagementTitle}
          </h2>
          <p className="mx-auto mt-4 max-w-3xl leading-relaxed text-paper/70">
            {services.engagementBody}
          </p>
          <Link
            href={`/${typedLocale}/contact`}
            className="mt-8 inline-block rounded-full bg-paper px-8 py-3.5 text-sm font-medium text-ink transition-colors hover:bg-accent-soft"
          >
            {nav.cta}
          </Link>
        </Container>
      </section>
    </>
  );
}